<template>
  <div class="audit-record">
    <p class="title">类目变更记录</p>
    <div class="record_table">
      <el-table border :data="list" height="300">
        <el-table-column type="index" width="70" label="序号" />
        <el-table-column label="变更时间" prop="createTime" :formatter="(row, column, cellValue, index) => $formater.formatTime(cellValue)" />

        <el-table-column label="审核状态" prop="operateType">
          <template #default="scope">
            <span v-if="scope.row.enableFlag === 'REJECTED'" style="color: red">已驳回</span>
            <span v-if="scope.row.operateType === 'PASS'">{{ consts.recordStatus[scope.row.operateType] }}</span>
            <span v-else-if="scope.row.operateType === 'COMMIT'" style="color: orange">{{ consts.recordStatus[scope.row.operateType] }}</span>
            <span v-else style="color: red">{{ consts.recordStatus[scope.row.operateType] }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template #default="scope">
            <div style="display: flex">
              <Link class="cate-link" label="查看变更信息" :underline="true" @click="onShowChangeClick(scope.row)" />

              <el-tooltip popper-class="tooltip" effect="light" placement="bottom">
                <div>
                  <Link class="cate-link" v-if="scope.row.operateType === 'REJECT'" label="驳回原因" :underline="true" />
                </div>

                <template #content>
                  <h4>驳回原因</h4>
                  <div class="reason">{{ scope.row.remark }}</div>
                </template>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <ChangeCate :isCate="isCate" v-model:visible="changeCateVisible" :changeCateInfo="userInfo.currentApplyCate" />
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import Link from '@/components/button/link.vue'
import consts from '@/consts'
import ChangeCate from './view.vue'
defineProps(['list', 'cardInfo', 'isCate'])

const userInfo = reactive({
  currentApplyCate: {}
})
const changeCateVisible = ref(false)

const onShowChangeClick = (row) => {
  changeCateVisible.value = true
  nextTick(() => {
    userInfo.currentApplyCate = Object.assign({}, row)
  })
}
</script>
<style scoped lang="scss">
.audit-record {
  padding: 20px 80px 20px 0;
  margin-top: 10px;
  background-color: #fff;

  .title {
    line-height: 20px;
    font-weight: 500;
    font-weight: 500;
  }

  .record_table {
    margin-top: 20px;

    .el-table {
      :deep(tr) {
        th,
        td {
          border-right: 0;
        }

        th {
          background-color: #fafafa;
        }
      }

      :deep(tr):hover {
        background-color: #f5f7fa;
      }

      :deep(thead) {
        font-size: 14px;
        color: var(--span-color-text);
        line-height: 16px;
        height: 47px;
      }

      :deep(tbody) {
        tr {
          height: 64px;
        }
      }
    }
  }
}
</style>
